<!-- 会话人列表 -->
<template>
  <view>
    <baseHead
      title="消息"
      bg="#ffffff"
      :bgImage="true"
      color="#000000"
      :showReturn="false"
    ></baseHead>
    <view class="container-conversation">
      <view class="scroll-box">
        <view class="uni-list margintop-bar" v-if="conversationList.length > 0">
          <template v-for="(item, index) in conversationList">
            <view
              :key="item.conversationID"
              @tap="handleRoute(item)"
              v-if="item.type == 'C2C'"
            >
              <uni-swipe-action :autoClose="true">
                <uni-swipe-action-item
                  :right-options="options1"
                  @change="shanchuChage($event, index)"
                  :show="item.isOpened"
                  @click="shanchuduhua(item.conversationID)"
                >
                  <TUI-conversation-item
                    :data-type="item.type"
                    :conversation="item"
                  >
                    <template
                      slot="slotname"
                      v-if="item.userProfile.userID !== '@hui#system'"
                    >
                      <text class="tsgsoltname">
                        <text v-show="listdatatim(item)" class="toltnamedian">
                        </text>
                        <text v-show="listdatatim(item)" class="viewtext">
                          {{ listdatatim(item) }}
                        </text>
                        <text v-show="listdtim(item)" class="toltnamedian">
                        </text>
                        <text v-show="listdtim(item)" class="viewtext">
                          {{ listdtim(item) }}
                        </text>
                        <text
                          v-show="listMaxWageim(item)"
                          class="toltnamedian"
                        ></text>
                        <text v-show="listMaxWageim(item)" class="viewtext">
                          {{ listMaxWageim(item) }}
                        </text>
                      </text>
                    </template>
                  </TUI-conversation-item>
                </uni-swipe-action-item>
              </uni-swipe-action>
            </view>
          </template>
        </view>
        <u-empty
          v-else
          mode="data"
          icon="/static/recruit/index/qsy.png"
          width="350"
          marginTop="150"
        >
        </u-empty>
      </view>
    </view>
  </view>
</template>
<script>
import baseHead from "@/pages/component/baseHead.vue";
import coverjobhunting from "@/pages/views/packageE/type-jobhunting/index.vue";
import coverrecruit from "@/pages/views/packageE/type-recruit/index.vue";
// import logger from "@/utils/logger";
import TUIConversationItem from "@/components/tui-conversation/conversation-item/index";
import TUIMessageList from "@/components/tui-chat/message-list/index";
import { mapState } from "vuex";

export default {
  data() {
    return {
      title: "消息会话",
      type: uni.getStorageSync("type"),
      options1: [
        {
          text: "删除",
          style: {
            backgroundColor: "#F35370",
          },
        },
      ],
    };
  },
  computed: {
    ...mapState({
      conversationList: (state) => state.conversationList,
    }),
  },
  //子组件
  components: {
    coverjobhunting,
    coverrecruit,
    baseHead,
    TUIConversationItem,
    TUIMessageList,
  },
  // 监听页面初始化
  onInit() {},
  // 点击 tab 时触发，参数为Object
  onTabItemTap(item) {
    if (item.index == 3) {
      uni.setTabBarStyle({
        selectedColor: "#151724",
        backgroundColor: "#fff",
        borderStyle: "black",
      });
      // 动态修改状态栏字体颜色
      uni.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: "#000000",
      });
    }
  },
  //  启动，从后台进入前台显示  或从后一个跳转到前一个页面
  onShow() {
    this.type = uni.getStorageSync("type");
  },
  // 监听页面初次渲染完成
  onReady() {},
  // 监听页面隐藏
  onHide() {
    if (this.conversationList.length > 0) {
      this.conversationList.forEach((res, index2) => {
        res.isOpened = "none";
      });
    }
  },
  onShow() {
    let num = 0;
    this.conversationList.forEach((item) => {
      num = num + item.unreadCount;
    });
    if (num > 0) {
      uni.showTabBarRedDot({
        index: 3,
      });
      uni.setTabBarBadge({
        index: 3,
        text: num < 100 ? num + "" : "99+",
      });
    } else {
      // 隐藏 tabBar 某一项的右上角的红点。
      uni.hideTabBarRedDot({
        index: 3,
      });
      // 移除 tabBar 某一项右上角的文本。
      uni.removeTabBarBadge({
        index: 3,
      });
    }
  },
  // 计算方法
  methods: {
    shanchuChage(e, index) {
      if (e == "left" || e == "right") {
        this.conversationList.forEach((res, index2) => {
          if (index2 === index) {
            res.isOpened = "right";
          } else {
            res.isOpened = "none";
          }
        });
      }
    },
    handleRoute(item) {
      let url = "";
      if (item.userProfile.userID !== "@hui#system") {
        if (this.type) {
          url = `/pages/views/packageE/type-jobhunting/TUI-Chat/chat?conversationID=${item.conversationID}`;
          // console.log("个人");
        } else {
          url = `/pages/views/packageE/type-recruit/TUI-Chat/chat?conversationID=${item.conversationID}`;
          // console.log("企业");
        }
      } else {
        url = `/pages/Huicover/systemMessage/index?conversationID=${item.conversationID}`;
        //系统
      }
      uni.navigateTo({
        url,
      });
    },
    listdatatim(item) {
      if (item.customData) {
        let datatext = JSON.parse(item.customData);
        // 个人
        if (this.type) {
          let dadtatext;
          if (datatext.CorpName) {
            dadtatext = `${datatext.CorpName}`;
          } else {
            dadtatext = false;
          }
          return dadtatext;
        } else {
          // 企业
          let dadtatext;
          if (datatext.PositionName) {
            dadtatext = `${datatext.PositionName}`;
          } else {
            dadtatext = false;
          }
          return dadtatext;
        }
      }
    },
    listdtim(item) {
      if (item.customData) {
        let datatext = JSON.parse(item.customData);
        //  个人
        if (this.type) {
          return false;
        } else {
          // 企业
          let dadtatext;
          if (datatext.EducationLevel) {
            dadtatext = `${datatext.EducationLevel}`;
          } else {
            dadtatext = false;
          }
          return dadtatext;
        }
      }
    },
    listMaxWageim(item) {
      // JSON.stringify();
      if (item.customData) {
        let datatext = JSON.parse(item.customData);
        //  个人
        if (this.type) {
          return false;
        } else {
          // 企业
          let dadtatext;
          if (datatext.Negotiable == false) {
            dadtatext = `${datatext.MinWage / 1000}K-${
              datatext.MaxWage / 1000
            }K`;
          } else {
            dadtatext = `面议`;
          }
          return dadtatext;
        }
      }
    },
    shanchuduhua(item) {
      let promise = uni.$TUIKit.deleteConversation(item);
      promise
        .then(function (imResponse) {
          // 删除会话成功
          const { conversationID } = imResponse.data; // 被删除的会话 ID
        })
        .catch(function (imError) {
          //   console.warn("deleteConversation error:", imError); // 删除会话失败的相关信息
        });
    },
  },
  watch: {
    conversationList: {
      handler(value) {
        let num = 0;
        value.forEach((item) => {
          num = num + item.unreadCount;
        });
        if (num > 0) {
          uni.showTabBarRedDot({
            index: 3,
          });
          uni.setTabBarBadge({
            index: 3,
            text: num < 100 ? num + "" : "99+",
          });
        } else {
          // 隐藏 tabBar 某一项的右上角的红点。
          uni.hideTabBarRedDot({
            index: 3,
          });
          // 移除 tabBar 某一项右上角的文本。
          uni.removeTabBarBadge({
            index: 3,
          });
        }
      },
      immediate: true, // 初始化就开启监视
      deep: true, // 开启深度监视
    },
  },
};
</script>

<style lang="scss" scoped>
.huihua {
  background-color: #f7f9fb !important;
}
.tsgsoltname {
  font-size: 23rpx;

  .viewtext {
    white-space: nowrap;
  }

  .toltnamedian {
    width: 2px;
    height: 2px;
    display: inline-block;
    margin: 10rpx;
    border-radius: 1px;
    background-color: black;
  }
}
</style>